<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>图表统计</title>
  <!--基础样式-->
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: base-css"></th:block>
  <!--主题色-->
  <th:block th:include="common/pub_head :: theme-blue"></th:block>

  <link type="text/css" rel="stylesheet" href="../assets/font/log/iconfont.css"/>
  <link rel="stylesheet" type="text/css" href="../assets/css/page_data.css"/>

  <script src="../assets/js/My97DatePicker/WdatePicker.js"></script>
  <style>
    .fixed-table-container {
      border: none;
    }

    html, body {
      overflow: hidden;
    }

    .bor_view {
      height: 500px
    }

    .echart_view {
      width: 750px;
      height: 520px;
      padding: 8px;
      display: none;
    }

    .view_show .form-group {
      margin-bottom: 25px;
    }
  </style>
</head>

<body>
<div class="wrapper-content">
  <div class="box">
    <div class="box-header with-border">
      <div class="box-title dec_1 theme-border-left">图表统计<i class='iconfont slice33'></i></div>
    </div>
    <div class="box-body">
      <div class="input-group fl col-xs-7" style="margin-top:0px; positon:relative">
        <input type="text" id="echartNameQuery" class="form-control" placeholder="请输入图标名称或项目名称或统计依据"/>
        <span class="input-group-btn">
           <button class="btn btn-info btn-search" onclick="query()">
             <i class="iconfont icon-sousuo"></i>查找</button>
        </span>
      </div>
      <!-- 表格 -->
      <div class="fr mt15 mb10">
        <button type="button" class="btn btn-primary" data-toggle="modal" onclick="addVisualizeEchart()" id="add_btn">
          <span class="glyphicon glyphicon-plus"></span>
          添加
        </button>
        <button type="button" class="btn btn-danger" onclick="batchDelVisualizeEchart()">
          <span class="glyphicon glyphicon-remove"></span>
          删除
        </button>
      </div>
      <table id="table"></table>
    </div>
  </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="Modal_view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" style="width: 1100px;margin-top: 5px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加图表</h4>
      </div>
      <div class="modal-body" style="min-height: 320px;">
        <form role="form" class="form-horizontal row" id="list_form">
          <input type="hidden" name="id" id="id"/>
          <div class="col-sm-6">
            <div class="form-group">
              <label class="col-sm-3 control-label">
                图表名称:</label>
              <div class="col-sm-9">
                <input type="text" class="form-control input-sm" id="echartName" name="echartName"
                       onkeyup="throttle(hasExistEchartName)" placeholder="请输入名称"/>
                <div style="position: absolute;top: 8px; right: -3px"><b class="mr5 red500" id="existFlag">*</b></div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label class="col-sm-3 control-label">
                图表类型:</label>
              <div class="col-sm-9">
                <select class="form-control input-sm" id="type" name="type" onchange="changeType()">
                  <option value="1" selected>折线图</option>
                  <option value="2">柱状图</option>
                  <option value="3">饼状图</option>
                </select>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="row view_show">
            <div class="col-sm-3 bor_view" style="width: 320px">
              <div class="row">
                <h4>项目名称：<span id="multiIndexSpan">日志系统</span></h4>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">
                  项目名称:</label>
                <div class="col-sm-8">
                  <select class="form-control input-sm" onchange="changeMultiIndex('')" name="multiIndex"
                          id="multiIndex">
                    <option value="">请选择项目...</option>
                  </select>
                  <span class="mr5 red500" style="position: absolute;top: 9px;right: 0px;">*</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">
                  统计依据:</label>
                <div class="col-sm-8">
                  <select class="form-control input-sm" id="field" name="field" onchange="changeField()">
                    <option value="">请选择...</option>
                    <th:block th:each="field : ${fieldList}">
                      <option th:value="${field}"
                              th:text="${field}"></option>
                    </th:block>
                  </select>
                  <span class="mr5 red500" style="position: absolute;top: 9px;right: 0px;">*</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">
                  过滤条件:</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control input-sm" name="filterStr" id="filterStr"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">
                  汇聚方式:</label>
                <div class="col-sm-8">
                  <select class="form-control input-sm" id="converMethod" name="converMethod">
                    <option value="1">count</option>
                  </select>
                </div>
              </div>
              <div class="form-group timeDiv">
                <label class="col-sm-4 control-label">汇聚日期粒度:</label>
                <div class="col-sm-8">
                  <select class="form-control input-sm" name="formate" id="formate">
                    <th:block th:each="format : ${formateMap}">
                      <option th:value="${format.key}" th:text="${format.value}"></option>
                    </th:block>
                  </select>
                </div>
              </div>
              <div class="form-group timeDiv">
                <label class="col-sm-4 control-label">最近时间:</label>
                <div class="col-sm-4" style="padding-right: 0px;">
                  <input type="text" class="form-control input-sm" name="last" id="last"
                         onkeyup="limitDigit(this)" onblur="limitDigit(this)"/>
                </div>
                <div class="col-sm-4">
                  <select class="form-control input-sm" name="timeField" id="timeField">
                    <th:block th:each="timeField : ${timeFieldMap}">
                      <option th:value="${timeField.key}"
                              th:text="${timeField.value}"></option>
                    </th:block>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-9"></div>
                <div class="col-sm-2 col-sm-pull-1">
                  <button type="button" class="btn btn-primary" onclick="generatEchart()">生成</button>
                </div>
              </div>
            </div>
            <div class="col-sm-8" style="width: 745px;">
              <div class="bor_view">
                <div id="main_line" class="echart_view show" data-type="1"></div>
                <div id="main_bar" class="echart_view" data-type="2"></div>
                <div id="main_pie" class="echart_view" data-type="3"></div>
              </div>
            </div>
          </div>
        </form>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary modal-btn" id="saveBtn" onclick="saveVisualizeEchart()">保存
          </button>
          <button type="button" class="btn btn-primary modal-btn" id="modifyBtn" onclick="modifyVisualizeEchart()">修改
          </button>
        </div>
      </div>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal -->
<!-- 详情弹出框 -->
<div class="info_content" id="info_content" style="display: none">
  <div class="row">
    <div class="col-sm-6">
      <h5>图表名称：<span id="infoEchartName"></span></h5>
    </div>
    <div class="col-sm-6">
      <h5>项目名称：<span id="infoMultiIndex"></span></h5>
    </div>
  </div>
  <div class="row">
    <div calss="info_main">
      <div id="info_main_bar" style="width: 1000px;height: 500px;margin:auto"></div>
    </div>
  </div>
</div>
<th:block th:include="common/pub_head :: echart"></th:block>
<script type="text/javascript" src="../assets/js/echart.config.js"></script>

<script>
  /*<![CDATA[*/
  function query() {
    $('#table').bootstrapTable('refresh')
  }

  window.onkeyup = function (ev) {
    var key = ev.keyCode || ev.which;
    if (key == 13) { //按下Escape
      query();
    }
  }

  function dealTime() {
    var endTime = new Date($("#endTime").val());
    var startTime = new Date($("#startTime").val());
    if (startTime.getTime() > endTime.getTime()) {
      $("#startTime").val($("#endTime").val());
    }
  }

  function changeField() {
    var field = $("#field").val();
    if (field.indexOf("\.date") != -1) {
      $(".timeDiv").show();
    } else {
      $("#last").val("");
      $(".timeDiv").hide();
    }
  }

  function limitDigit(thisObj) {
    var value = $(thisObj).val().replace(/\D/g, '');

    $(thisObj).val(value);
  }

  function hasExistEchartName() {
    var echartName = $("#echartName").val();
    var formData = {
      "echartName": echartName
    };

    var URL = "hasExistEchartName";

    if (hisEchartName != "" && hisEchartName == echartName) {
      $("#existFlag").html("");
      $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");
    } else if (echartName.split(" ").join("") == "") {
      $("#existFlag").html("*");
      $("#existFlag").attr("class", "mr5 red500");
    } else {
      $.post(URL, formData, function (jsonData) {
        var flag = jsonData.flag;

        if (flag) {
          $("#existFlag").html("");
          $("#existFlag").attr("class", "mr5 glyphicon glyphicon-remove red500");
        } else {
          $("#existFlag").html("");
          $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");
        }
      }, "json");
    }
  }

  function throttle(method) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
      method.call();
    }, 200);
  }

  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var infoEchart = echarts.init(document.getElementById('info_main_bar'));

  function detailVisualizeEchart(id) {
    infoEchart.dispose();
    infoEchart = echarts.init(document.getElementById('info_main_bar'));

    var URL = "editVisualizeEchart/" + id;
    var formData = {};

    $.post(URL, formData, function (jsonData) {
      if (jsonData.flag) {
        var type = jsonData.visualizeChartBean.type;

        $("#infoEchartName").html(jsonData.visualizeChartBean.echartName);
        $("#infoMultiIndex").html(jsonData.visualizeChartBean.multiIndex);
        if (type == "1") {
          option_line.xAxis.data = jsonData.echartMap.xAxisDataList;
          option_line.series[0].name = jsonData.visualizeChartBean.field;
          option_line.series[0].data = jsonData.echartMap.seriesDataList;

          infoEchart.setOption(option_line);
        } else if (type == "2") {
          option_bar.xAxis.data = jsonData.echartMap.xAxisDataList;
          option_bar.series[0].name = jsonData.visualizeChartBean.field;
          option_bar.series[0].data = jsonData.echartMap.seriesDataList;

          infoEchart.setOption(option_bar);
        } else if (type == "3") {
          option_pie.series[0].name = jsonData.visualizeChartBean.field;
          option_pie.series[0].data = jsonData.echartMap.pieSeriesDataList;

          infoEchart.setOption(option_pie);
        }

        var layerIndex = layer.open({
          type: 1,
          title: '图表详情',
          area: ['100%', '100%'], //宽高
          shadeClose: true,
          content: $("#info_content")
        });

        window.onkeyup = function (ev) {
          var key = ev.keyCode || ev.which;
          if (key == 27) { //按下Escape
            layer.close(layerIndex); //关闭信息框
          }
        }
      } else {
        layer.msg(jsonData.errorMsg, {icon: 2});
      }

    });
  }

  function batchDelVisualizeEchart() {
    var selections = $("#table").bootstrapTable("getSelections");
    var id = [];
    for (var i = 0; i < selections.length; i++) {
      id.push(selections[i].id);
    }

    if (id.length == 0) {
      layer.alert("尚未选择，不能执行该操作！");

      return;
    }

    delVisualizeEchart(id + "");
  }

  function delVisualizeEchart(id) {
    var URL = "delVisualizeEchart";

    var formData = {
      "id": id,
      "_method": "DELETE"
    };
    layer.confirm("确定要删除数据吗？", function () {
      $.post(URL, formData, function (jsonData) {
        var flag = jsonData.flag;

        if (flag) {
          layer.msg('删除成功！', {icon: 1, time: 1000});
          $("#table").bootstrapTable("refresh");
        } else {
          layer.msg('删除失败！', {icon: 2});
        }

        $("#add_btn").removeAttr("disabled");
        $("#add_btn").attr("class", "btn btn-primary");
      }, "json");
    });
  }

  function modifyVisualizeEchart(id) {
    var clazz = $("#existFlag").attr("class");
    var echartName = $("#echartName").val();
    if (echartName.split(" ").join("") == "") {
      layer.msg('图表名称不能为空！', {icon: 2});

      return;
    }
    if (clazz.indexOf("red500") != -1) {
      layer.msg('图表名称已经存在！', {icon: 2});

      return;
    }

    if ($("#multiIndex").val() == "") {
      layer.alert("请选择项目名称");

      return;
    }

    if ($("#field").val() == "") {
      layer.alert("请选择统计依据");

      return;
    }

    var formData = $("#list_form").serializeArray();
    var timeFlag = ($(".timeDiv").eq(0).attr("style") + "").indexOf("none") != -1;
    if (!timeFlag) {
      if ($("#last").val() == "") {
        layer.alert("最近时间不能为空");

        return;
      }
    } else {
      for (var i = 0; i < formData.length; i++) {
        if (formData[i].name == "format") {
          formData[i].value = null;
        }
        if (formData[i].name == "last") {
          formData[i].value = null;
        }
        if (formData[i].name == "timeField") {
          formData[i].value = null;
        }
      }
    }
    var URL = "modifyVisualizeEchart/" + $("#id").val();
    var relIndex = $("#field").find("option:selected").attr("data-relIndex");
    formData.push({"name": "_method", "value": "PUT"});
    formData.push({"name": "relIndex", "value": relIndex});

    $.post(URL, formData, function (jsonData) {
      var flag = jsonData.flag;

      if (flag) {
        layer.msg('修改成功！', {icon: 1, time: 1000});
        $("#Modal_view").modal("hide");
        $("#table").bootstrapTable("refresh");
      } else {
        layer.msg('修改失败！', {icon: 2});
      }
    }, "json");
  }

  var hisEchartName = "";

  function editVisualizeEchart(id) {
    var index = layer.load();
    var URL = "editVisualizeEchart/" + id;
    var formData = {};

    generatFlag = true;
    $.post(URL, formData, function (jsonData) {
      var flag = jsonData.flag;

      if (flag) {
        hisEchartName = jsonData.visualizeChartBean.echartName;
        var type = jsonData.visualizeChartBean.type;

        option_line.xAxis.data = jsonData.echartMap.xAxisDataList;
        option_line.series[0].name = jsonData.visualizeChartBean.field;
        option_line.series[0].data = jsonData.echartMap.seriesDataList;

        option_bar.xAxis.data = jsonData.echartMap.xAxisDataList;
        option_bar.series[0].name = jsonData.visualizeChartBean.field;
        option_bar.series[0].data = jsonData.echartMap.seriesDataList;

        option_pie.series[0].name = jsonData.visualizeChartBean.field;
        option_pie.series[0].data = jsonData.echartMap.pieSeriesDataList;

        var domEle = "<option value=''>请选择...</option>";
        $("#multiIndex").html(domEle);
        var URL = "loadMultiIndex";
        $.post(URL, {}, function (jsonData2) {
          $("#Modal_view").html(myModalClone.html());
          $("#type").val(type);
          if (jsonData2.flag) {
            var multiIndexList = jsonData2.multiIndexList;
            for (var i = 0; i < multiIndexList.length; i++) {
              domEle += "  <option value='" + multiIndexList[i].multiIndex + "'>";
              domEle += multiIndexList[i].multiIndex + "</option>";
            }

            $("#multiIndex").html(domEle);

            $("#multiIndex").val(jsonData.visualizeChartBean.multiIndex);
            $("#formate").val(jsonData.visualizeChartBean.formate);
            $("#last").val(jsonData.visualizeChartBean.last);
            $("#timeField").val(jsonData.visualizeChartBean.timeField);
            changeMultiIndex(jsonData.visualizeChartBean.field);
            changeType();
          } else {
            layer.msg("加载项目名称错误", {icon: 2});
          }

          $("#id").val(jsonData.visualizeChartBean.id);
          $("#echartName").val(jsonData.visualizeChartBean.echartName);
          $("#lastDay").val(jsonData.visualizeChartBean.lastDay);
          $("#filterStr").val(jsonData.visualizeChartBean.filterStr);
          $("#existFlag").html("");
          $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");

          $(".modal-btn").hide();
          $("#myModalLabel").html("修改图表");
          $("#modifyBtn").show();
          $('#Modal_view').modal('show');

        }, "json");
      } else {
        layer.msg(jsonData.errorMsg, {icon: 2});
      }
      layer.close(index);
    }, "json");
  }

  function saveVisualizeEchart() {
    var relIndex = $("#field").find("option:selected").attr("data-relIndex");

    var clazz = $("#existFlag").attr("class");
    var echartName = $("#echartName").val();
    if (echartName.split(" ").join("") == "") {
      layer.msg('图表名称不能为空！', {icon: 2});

      return;
    }
    if (clazz.indexOf("red500") != -1) {
      layer.msg('图表名称已经存在！', {icon: 2});

      return;
    }

    if ($("#multiIndex").val() == "") {
      layer.alert("请选择项目名称");

      return;
    }

    if ($("#field").val() == "") {
      layer.alert("请选择统计依据");

      return;
    }

    var formData = $("#list_form").serializeArray();
    var timeFlag = ($(".timeDiv").eq(0).attr("style") + "").indexOf("none") != -1;
    if (!timeFlag) {
      if ($("#last").val() == "") {
        layer.alert("最近时间不能为空");

        return;
      }
    } else {
      for (var i = 0; i < formData.length; i++) {
        if (formData[i].name == "format") {
          formData[i].value = null;
        }
        if (formData[i].name == "last") {
          formData[i].value = null;
        }
        if (formData[i].name == "timeField") {
          formData[i].value = null;
        }
      }
    }

    formData.push({"name": "relIndex", "value": relIndex});
    var URL = "saveVisualizeEchart";

    $.post(URL, formData, function (jsonData) {
      var flag = jsonData.flag;

      if (flag) {
        layer.msg('保存成功！', {icon: 1, time: 1000});
        $("#Modal_view").modal("hide");
        $("#table").bootstrapTable("refresh");
      } else {
        layer.msg('保存失败！', {icon: 2});
      }
    });
  }

  function changeType() {
    var type = $("#type").val();
    $(".echart_view").each(function () {
      $(this).removeClass("show");
      if (type == $(this).attr("data-type")) {
        $(this).addClass("show");
      }
    });

    if (generatFlag) {
      if (type == "1") {
        myChart_line.dispose();
        myChart_line = echarts.init(document.getElementById('main_line'));
        myChart_line.setOption(option_line);
      } else if (type == "2") {
        myChart_bar.dispose();
        myChart_bar = echarts.init(document.getElementById('main_bar'));
        myChart_bar.setOption(option_bar);
      } else if (type == "3") {
        if (option_pie.series[0].data.length > 30) {
          if (confirm("数据超过30条，确定要展示吗？")) {
            myChart_pie.dispose();
            myChart_pie = echarts.init(document.getElementById('main_pie'));
            myChart_pie.setOption(option_pie);
          }
        } else {
          myChart_pie.dispose();
          myChart_pie = echarts.init(document.getElementById('main_pie'));
          myChart_pie.setOption(option_pie);
        }

      }
    }
  }

  var generatFlag = false;

  function generatEchart() {
    var relIndex = $("#field").find("option:selected").attr("data-relIndex");
    var field = $("#field").val();
    var filterStr = $("#filterStr").val();
    var formate = $("#formate").val();
    var last = $("#last").val();
    var timeField = $("#timeField").val();
    var timeFlag = ($(".timeDiv").eq(0).attr("style") + "").indexOf("none") != -1;

    if ($("#multiIndex").val() == "") {
      layer.alert("请选择项目名称");

      return;
    }

    if ($("#field").val() == "") {
      layer.alert("请选择统计依据");

      return;
    }

    if (!timeFlag && last == "") {
      layer.alert("最近时间不能为空");

      return;
    }

    var formData = {
      "relIndex": relIndex,
      "field": field,
      "filterStr": filterStr.split(" ").join(" or "),
      "formate": formate,
      "last": last,
      "timeField": timeField
    };
    var URL = "generatEchart";

    var type = $("#type").val();

    if (type == "1") {
      myChart_line.dispose();
      myChart_line = echarts.init(document.getElementById('main_line'));
      myChart_line.showLoading();
    } else if (type == "2") {
      myChart_bar.dispose();
      myChart_bar = echarts.init(document.getElementById('main_bar'));
      myChart_bar.showLoading();
    } else if (type == "3") {
      myChart_pie.dispose();
      myChart_pie = echarts.init(document.getElementById('main_pie'));
      myChart_pie.showLoading();
    }

    $.post(URL, formData, function (jsonData) {
      generatFlag = true;

      option_line.xAxis.data = jsonData.xAxisDataList;
      option_line.series[0].name = field;
      option_line.series[0].data = jsonData.seriesDataList;

      option_bar.xAxis.data = jsonData.xAxisDataList;
      option_bar.series[0].name = field;
      option_bar.series[0].data = jsonData.seriesDataList;

      option_pie.series[0].name = field;
      option_pie.series[0].data = jsonData.pieSeriesDataList;

      var type = $("#type").val();

      if (type == "1") {
        myChart_line.setOption(option_line);
        myChart_line.hideLoading();
      } else if (type == "2") {
        myChart_bar.setOption(option_bar);
        myChart_bar.hideLoading();
      } else if (type == "3") {
        myChart_pie.setOption(option_pie);
        myChart_pie.hideLoading();
      }
    }, "json");
  }

  var myModalClone = $("#Modal_view").clone();
  var myChart_line = echarts.init(document.getElementById('main_line'));
  var myChart_bar = echarts.init(document.getElementById('main_bar'));
  var myChart_pie = echarts.init(document.getElementById('main_pie'));

  function addVisualizeEchart() {

    generatFlag = false;
    hisEchartName = "";

    var domEle = "<option value=''>请选择...</option>";
    $("#multiIndex").html(domEle);
    var URL = "loadMultiIndex";
    $.post(URL, {}, function (jsonData) {
      $("#Modal_view").html(myModalClone.html());
      if (jsonData.flag) {
        var multiIndexList = jsonData.multiIndexList;
        for (var i = 0; i < multiIndexList.length; i++) {
          domEle += "  <option value='" + multiIndexList[i].multiIndex + "'>";
          domEle += multiIndexList[i].multiIndex + "</option>";
        }

        $("#multiIndex").html(domEle);
      } else {
        layer.msg("加载项目名称错误", {icon: 2});
      }

      $(".modal-btn").hide();
      $("#myModalLabel").html("添加图表");
      $("#saveBtn").show();
      $('#Modal_view').modal('show').css({
        width: 'auto',
        'margin-left': 'auto'
      });
    }, "json");
  }

  function initEchart() {
    myChart_line.dispose();
    myChart_line = echarts.init(document.getElementById('main_line'));
    myChart_line.setOption(option_line);

    myChart_bar.dispose();
    myChart_bar = echarts.init(document.getElementById('main_bar'));
    myChart_bar.setOption(option_bar);

    myChart_pie.dispose();
    myChart_pie = echarts.init(document.getElementById('main_pie'));
    myChart_pie.setOption(option_pie);
  }

  function changeMultiIndex(field) {
    var multiIndex = $("#multiIndex").val();
    $("#multiIndexSpan").html(multiIndex);

    if (multiIndex != "") {
      var URL = "listConverField";
      var formData = {
        "index": multiIndex
      };
      var domEle = "<option value=''>请选择..</option>";
      $("#field").html(domEle);
      $.post(URL, formData, function (jsonData) {
        var flag = jsonData.flag;

        if (flag) {
          var fieldList = jsonData.fieldList;

          var domEle = "<option value=''>请选择...</option>";
          var existFieldFlag = false;
          $.each(fieldList, function (key, value) {
            if (!(key.indexOf("@version") != -1 || key.indexOf("tags") != -1)) {
              if (key == field) {
                existFieldFlag = true;
              }
              var txt = key;
              if (txt.indexOf("\.date")) {
                txt = txt.replace("\.date", "");
              }
              domEle += "<option value='" + key + "' data-relIndex='" + value + "'>" + txt + "</option>";
            }
          });
          $("#field").html(domEle);

          if (field != "" && existFieldFlag) {
            $("#field").val(field);
            changeField();
          }
        } else {
          layer.msg("有不存在的日志文件", {icon: 2, time: 2000});
        }
      }, "json");
    } else {
      var domEle = "<option value=''>请选择..</option>";
      $("#field").html(domEle);
    }
  }

  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var $table = $('#table');
  $table.bootstrapTable({
    classes: 'table table-hover table-condensed table-bordered table-responsive',
    contentType: "application/x-www-form-urlencoded",
    height: getHeight(),
    url: "pageVisualizeEchart",
    striped: true, //隔行变色
    pagination: true,
    singleSelect: false,
    queryParamsType: '',
    queryParams: queryParams,
    sidePagination: "server",//表格分页的位置
    pageNumber: 1,
    pageSize: 10,
    pageList: [10, 20, 50, 100],
    onLoadSuccess: function () {
      $(".bs-checkbox").css({"text-align": "center", "vertical-align": "middle"});
    },
    columns: [{
      checkbox: true,
      width: 50
    }, {
      field: 'id',
      width: 100,
      title: '编号',
      halign: 'center',
      align: 'center',
      valign: 'middle'
    }, {
      width: 250,
      field: 'echartName',
      title: '图表名称',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      sortable: true
    }, {
      width: 150,
      field: 'multiIndex',
      title: '项目名称',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      sortable: true
    }, {
      width: 130,
      field: 'field',
      title: '统计依据',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      sortable: true
    }, {
      width: 100,
      field: 'typePo',
      title: '图表类型',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      sortable: true
    }, {
      width: 250,
      field: 'operate',
      title: '操作',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      formatter: operateFormatter
    }
    ]
  });

  function queryParams(params) {
    var sortName = (params.sortName) ? params.sortName.replace(/([A-Z])/g, "_$1").toLowerCase() : "";
    if (sortName == "type_po") {
      sortName = "type";
    }
    var paramMap = {
      "pageSize": params.pageSize,
      "pn": params.pageNumber,
      "echartName": $('#echartNameQuery').val(),
      "sortName": sortName,
      "sortOrder": params.sortOrder
    };

    return paramMap;
  }

  function operateFormatter(value, row, index) {
    return [
      "<a class='btn btn-primary' href=\"javascript:detailVisualizeEchart('" + row.id + "')\" " +
      "title='查看详情'>查看详情</a>",
      "<a class='btn btn-success' href=\"javascript:editVisualizeEchart('" + row.id + "')\" title='修改'>修改</a>",
      "<a class='btn btn-danger' href=\"javascript:delVisualizeEchart('" + row.id + "')\" title='删除'>删除</a>"
    ].join('');
  }

  $(window).resize(function () {
    $table.bootstrapTable('resetView', {
      height: getHeight()
    });
  });

  function getHeight() {
    return $(window).height() - 195;
  }

  /*]]>*/
</script>
</body>
</html>